<template>
	<view>
		<view class="flex-between bg-white py-30 mt-1">
			<view class="flex-1 text-center">
				<view class="size-36 text-bold">郑州市-金水区</view>
				<view class="size-26 primary">六合之家</view>
			</view>
			<image class="icon-100" src="../../static/1.png" mode="widthFix"></image>
			<view class="flex-1 text-center">
				<view class="size-36 text-bold">新乡市-原阳县</view>
				<view class="size-26 primary">王禄村</view>
			</view>
		</view>
		<view class="bg-white p-30 mt-20">
			<view class="size-32 text-med">附近行程</view>
		</view>
		<view class="p-30">
			<view class="list">
				<view class="item" v-for="item in 4" :key="item" @click="$tools.to('/pages/itineraryDetail/itineraryDetail?id=' + item)">
					<view class="flex-between">
						<view class="size-30 gray-3">2024-10-10 10:30</view>
						<view class="primary">
							<text class="size-26">￥</text>
							200.00
						</view>
					</view>
					<view class="flex size-30 mt-10">
						<view class="badge badge-1">起</view>
						<view class="ml-20">河南省郑州市金水区六合小区</view>
					</view>
					<view class="flex size-30 mt-10">
						<view class="badge badge-2">终</view>
						<view class="ml-20">河南省周口市西华县</view>
					</view>
					<view class="flex-between mt-30 u-border-top pt-20">
						<u-avatar src="" size="24"></u-avatar>
						<view class="flex-1 ml-20">
							<view class="size-28 gray-6">灶师傅</view>
							<view class="size-28 mt-4">比亚迪宋</view>
						</view>
						<view class="btn">预定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.list {
	.item {
		background: #fff;
		border-radius: 20upx;
		margin-bottom: 30upx;
		padding: 30upx;
		.btn{
			border-radius: 50upx;
			border: 1px solid $color-primary;
			color:$color-primary;
			font-size: 32upx;
			padding: 6upx 50upx;
		}
		/deep/.u-border-top{
			border-color:#f5f5f5 !important;
		}
	}
}
</style>
